<!--<script setup>-->


<!--</script>-->

<!--<template>-->
<!--<view>-->
<!--  <view class="txt">-->
<!--    不同意理由-->
<!--  </view>-->
<!--  <view class="iptcontainer">-->
<!--    <input type="text" class="input">-->
<!--  </view>-->
<!--  <view class="btncontainer">-->
<!--    <button class="btn">提交</button>-->
<!--  </view>-->
<!--</view>-->
<!--</template>-->
<!--<style>-->
<!--.txt{-->
<!--    color: #6e6e6e;-->
<!--    font-size: 12px;-->
<!--    font-weight: 400;-->
<!--    line-height: 0;-->
<!--    letter-spacing: 0;-->
<!--margin-left: 5px;-->
<!--}-->
<!--.iptcontainer{-->
<!--  width: 351px;-->
<!--  height: 140px;-->
<!--  background: #FFFFFF;-->
<!--  box-shadow: 0 2px 5px 0 #E2E4EB;-->
<!--  border-radius: 6px;-->
<!--}-->
<!--.btncontainer{-->
<!--  width: 351px;-->
<!--  height: 45px;-->
<!--  background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);-->
<!--  border-radius: 6px;-->
<!--}-->
<!--.btn{-->
<!--  width: 36px;-->
<!--  height: 25px;-->
<!--  font-weight: 500;-->
<!--  font-size: 18px;-->
<!--  color: #FFFFFF;-->
<!--  text-align: center;-->
<!--}-->
<!--</style>-->












<script setup>
import { ref } from 'vue';

// // 用于存储不同意理由的响应式变量
// const reason = ref('');
// // 用于标记是否已经提交过表单，防止重复提交
// const isSubmitted = ref(false);
// // 用于存储错误提示信息
// const errorMessage = ref('');
//
// // 提交表单的方法
// const submitForm = () => {
//   // 简单验证，确保理由不为空
//   if (!reason.value.trim()) {
//     errorMessage.value = '请输入不同意理由';
//     return;
//   }
//   isSubmitted.value = true;
//   errorMessage.value = '';
//   console.log('提交的不同意理由:', reason.value);
  // 这里可以添加将数据发送到后端的逻辑，例如使用axios等库
  // 模拟提交成功后的一些操作，比如清空表单
  // reason.value = '';
  // isSubmitted.value = false;
// };
</script>

<template>
  <view class="form-container">
    <view class="form-item">
      <text class="form-label">*不同意理由</text>
      <textarea
          class="form-textarea"
          placeholder="请输入不同意理由..."
          v-model="reason"
      />
      <text v-if="errorMessage" class="error-message">{{ errorMessage }}</text>
    </view>
    <button class="submit-button" :disabled="isSubmitted" >
      <template v-if="!isSubmitted">提交</template>
      <template v-else>提交中...</template>
    </button>
  </view>
</template>

<style scoped>
.form-container {
  padding: 20px;
  background-color: #f5f5f5;
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.form-textarea {
  width: 250px;
  height: 120px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}

.error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

.submit-button {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  text-align: center;
}

.submit-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>